<template>

  <colums_nomal
    :xlabel="[
     '墨水湖排水系统',
'杨泗港排水系统',
 '龟山北排水系统',
 '琴断口排水系统',
'曹家碑排水系统',

    ]"
    :echartsId="'pai1_colums'"
    :echartsData="echartsColumData"
    :derection="'h'"
    :unit="'m³'"
    :showFakeLenfend="false"
    :barWidth="'15%'"
    :key='refreshKey'
  ></colums_nomal>
</template>

<script setup lang="ts">
import { ComponentInternalInstance } from "vue";

const visible = ref(true)
const refreshKey = ref(0)

const props = defineProps({
  selectValue: {
    type: Number,
    default: 2024,
  },
  left_valueMonth: {
    type: Number,
    default: 1,
  },
});
const jsonData: any = inject("jsonData");

const data = computed(() => {
  let arr = [];
  try {
    arr = jsonData.value.jsc.yspstjtj[props.selectValue][props.left_valueMonth];
  } catch (error) {}
  return arr;
});

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const echartsColumData = ref(<any>[]);

watch(
  () => data.value,
  (value) => {
    if (value) {
      visible.value = false
      echartsColumData.value = [
        {
          name: "建设成本",
          value,
        },
      ];
      refreshKey.value+=1
      nextTick(() => {
        visible.value = true
      })
    }
  }
);

// const echartsColumData=ref([
//     {
//         name: "规划",
//         value:[20, 36, 40 , 50, 60]
//     },

// ])
</script>

<style></style>
